import React, {Component} from 'react'
import {
    StyleSheet, Text,
    View, Dimensions, Image
} from 'react-native'
import HomeGridItem from './HomeGirdItem'
import screen from '../util/sceen'
import color from '../../component/Colors'
var cols = 2;
var boxW = 100;
export default class shopsixpage extends Component {
    constructor(props) {
        super(props)
        this.state = {}
    }

    render() {
        let {datas} = this.props;
        console.info(datas)
        return (
            <View style={styles.container1}>
                {this.renderAllImage(datas)}
            </View>
        );
    }

    /*返回4个包*/
    renderAllImage(infos) {
        //定义数组装所有的子组件
        var allBadge = [];
        //遍历JSON数据
        for (var i = 0; i < infos.length; i++) {
            //取出单独的数据对象
            var badge = infos[i];
            //直接装入数组
            allBadge.push(
                <View key={i} style={styles.outViewStyle}>
                    <View style={styles.txtview}>
                        <Text style={styles.textTitleStyle}>
                            {badge.name}
                        </Text>
                        <Text style={styles.textContentStyle}>
                            {badge.content}
                        </Text>
                    </View>
                    <Image style={styles.textImageStyle} source={{uri: badge.img}}/>
                </View>
            );
        }
        //返回数组
        return allBadge;
    }
}

const styles = StyleSheet.create({
    container1: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'space-between',
    },
    outViewStyle: {
        flexDirection: 'row',
        alignItems: 'center',
        width: screen.width / 2,
        height: 100,
        borderWidth:1,
        borderColor:'#eeeeee',
        backgroundColor:'#fff'
    },
    textImageStyle: {
        width: 60,
        height: 60,
        marginLeft: 5,
        borderRadius: 50,
    },
    textTitleStyle: {
        color: 'red'
    },
    textContentStyle: {
        marginTop:5,
        fontSize:10,
    },
    txtview: {
        marginLeft: 15,
    }
});
module.exports = shopsixpage